<template>
  <div class>
    <el-tabs type="card">
          <el-tab-pane  label="模型列表">
            <div class="card tr mb2">
            <el-tooltip content="显示字段筛选" placement="bottom" effect="light">
              <el-popover placement="bottom" width="200" trigger="click">
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                >全选</el-checkbox>
                <el-checkbox-group v-model="showItemList" @change="handleCheckedChange">
                  <el-checkbox v-for="(item,key) in allItemList" :key="key" :label="item">{{item.name}}</el-checkbox>
                </el-checkbox-group>
                <el-button slot="reference" icon="el-icon-menu" size="mini" type="primary" circle></el-button>
              </el-popover>
            </el-tooltip>
            <el-tooltip content="展开/收起表单" placement="bottom" effect="light">
              <el-button
                icon="el-icon-search"
                @click="formShow= !formShow"
                size="mini"
                type="primary"
                circle
              ></el-button>
            </el-tooltip>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="newFlowModel">新增模板</el-button>
          </div>
          <div class="card" v-show="formShow">
            <el-form
              size="mini"
              :style="style"
              :model="ruleForm"
              ref="ruleForm"
              inline
              label-width="100px"
              class="demo-ruleForm"
            >
              <my-form-item label="模型编号" prop="id">
                <el-input size="mini" v-model="ruleForm.id"></el-input>
              </my-form-item>
              <my-form-item label="模型名称" prop="name">
                <el-input size="mini" v-model="ruleForm.name"></el-input>
              </my-form-item>
              <my-form-item>
                <el-button size="mini" type="primary" @click="submitForm('ruleForm')">查询</el-button>
                <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
              </my-form-item>
            </el-form>
          </div>
          <el-table stripe :data="tableData" border style="width: 100%">
            <el-table-column type="index" width="60px" align="center" fixed="left" label="序号"></el-table-column>
            <el-table-column
              v-for="(item,index) in showItemList"
              align="center"
              :min-width="item.width || '' "
              :key="index"
              :label="item.name"
            >
              <template slot-scope="scope">
                <template v-if="!item.formatter">{{ scope.row[item.key] }}</template>
                <template v-else>
                  <span v-text="item.formatter(scope.row, item)"></span>
                </template>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200px" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="modelEdit(scope.row)">编辑</el-button>
                <el-button size="mini" @click="modelDelete(scope.row)">删除</el-button>
                <el-button size="mini" @click="doDeployment(scope.row)">发布</el-button>
              </template>
            </el-table-column>
          </el-table>
            <el-pagination
              @size-change="sizeChange"
              @current-change="currentChange"
              :current-page="currentPage"
              :page-sizes="[ 10, 20,30, 40]"
              :page-size="pageSize"
              background style="float:right"
              layout="total, sizes, prev, pager, next"
              :total="total"
            ></el-pagination>

          <el-dialog :fullscreen="fullscreen"  :visible.sync="designerVisible" :before-close="handleDesignerClose">
                <div slot="title" class="header-title" style="margin-top: -13px">
                    <span class="title-name" style="">流程设计器</span>
                </div>
                <iframe ref="ifrm" class="iframe" :src="designerUrl"></iframe>
          </el-dialog>

          </el-tab-pane>
          <el-tab-pane  label="部署列表"> 
              <DeploymentList ref="deploymentList"></DeploymentList>
          </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
const defaultFormThead = [
  { key: "id", name: "模型编号", width: "120px" },
  { key: "name", name: "模型名称", width: "160px" },
  { key: "version", name: "版本", width: "80px" },
  { key: "createTime", name: "创建时间", width: "150px",
    formatter: row => {
          if (row.createTime) {
            return (new Date(row.createTime)).toLocaleString();
          } else {
            return '';
          }
        }
  },
];
import DeploymentList from '@/pages/activity/deploymentList'
export default {
  components: { DeploymentList },
  data() {
    return {
      designerUrl: "",
      fullscreen: true,
      designerVisible: false,
      addDialog: false,
      nodeform: {},
      multipleSelection: [],
      dialogNodeForms: false,
      FormsData: [],//节点表单信息
      NodesData: [],//工作流节点列表
      checkAll: true,
      isIndeterminate: false,
      allItemList: defaultFormThead,
      showItemList: defaultFormThead,
      formShow: false,
      dialogFormVisible: false,
      dialogFlowNodes: false,
      dialogEditVisible: false,
      offForm: true, //是否折叠
      folding: false, //表单是否超过一行
      formLabelWidth: "80px",
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      ruleForm: {
        serverName: '',
        bpmnName: '',
        bpmnPath: '',
        createUserName: '',
        createTime: '',
        deploymentId: '',
      },
      style: {},
      rules: {
      },
    };
  },

  mounted() {
    this.init();
  },
  computed: {
  },
  watch: {
  
  },
  methods: {
      //删除工作流模板
      modelDelete(row){
        this.$confirm('是否删除该模板', '删除确认', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        })
          .then(() => {
                this.$api
                .formPost("/api/flowact/models/doRmById", {id:row.id})
                .then(res => {
                  if (res.retHead.code == "0000000") {
                    this.init();
                    this.$message({
                        type: 'success',
                        message: "删除成功"
                    })
                  }else{
                    this.$message({
                        type: 'error',
                        message: res.retHead.message
                    })

                  }
                });
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: "取消删除"
            })
          });
         
      },
      //编辑模板（修改设计）
      modelEdit(row){
           this.designerVisible=true;
            this.designerUrl=this.baseURL+"/api/flowact/editor?modelId="+row.id+"&Auth-User-Token="+sessionStorage.getItem("token");
      },
      //模板发布
      doDeployment(row){
        this.$api
        .formPost("/api/flowact/models/deploymentBymodelId",{id:row.id})
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.$refs.deploymentList.init();
              this.$message({
              message: "发布成功",
              type: "success"
            });
          } else {
            this.$message({
              message: res.retHead.message,
              type: "error"
            });
          }
        });
        
      },

      //关闭设计器
      handleDesignerClose(){
        this.designerVisible=false;
        this.init();
        
      },
      //新增工作流模板
      newFlowModel(){
          this.$api
        .formPost("api/flowact/models/newModel")
        .then(res => {
          if (res.status == "000") {
            this.designerVisible=true;
            this.designerUrl=this.baseURL+res.redirectUrl+"&Auth-User-Token="+sessionStorage.getItem("token");
            
          } else {
            this.$message({
              message: res.retHead.message,
              type: "error"
            });
          }
        });
          
      },
    
    showFlowNodes(row) {
      this.dialogFlowNodes = true;
      let params = {
        deploymentId: row.deploymentId,
        pageNum: 1,
        pageSize: 20
      }
      this.$api
        .formPost("/api/activity/commTaskassignee/findListByDeploymentId", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.NodesData = res.retBody.list;
            console.log(this.NodesData);
          } else {
            this.$message({
              message: res.retHead.message,
              type: "error"
            });
          }
        });
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === defaultFormThead.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < defaultFormThead.length;
    },
    handleCheckAllChange(val) {
      this.showItemList = val ? defaultFormThead : [];
      this.isIndeterminate = false;
    },
    sizeChange(n) {
      this.pageSize = n;
      this.init();
    },
    currentChange(n) {
      this.currentPage = n;
      this.init();
    },
    init() {
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };
      if(this.ruleForm.name){
        params.name=this.ruleForm.name;
      }
      if(this.ruleForm.id){
        params.id=this.ruleForm.id;
      }
      this.$api
        .formPost("/api/flowact/models/getModelList", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.tableData = res.retBody.list;
            this.total = res.retBody.total;
            this.currentPage = res.retBody.pageNum;
          }
        });
    },

    submitForm(formName) {
      this.init();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
   
  },
  created() { }
};
</script>
<style lang='scss' scoped>
.btns {
  text-align: right;
}

.icon-arrow {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #f1f1f1;

  // i {
  //   background-color: #fff;
  //   position: absolute;
  //   color: #999;
  //   bottom: -7px;
  //   margin-left: 50%;
  //   transform: translateX(-50%);
  //   cursor: pointer;
  // }
  
}
.iframe {
      width: 100vw;
      height: 100vh;
      border: 0;
      overflow: hidden;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      left: 0;
      top: 54px;
  }
</style>